import React,{useEffect} from "react"
import "../styles/component/header.css"
import {Row,Col,Menu} from "antd"
import {HomeOutlined ,VideoCameraOutlined,InstagramOutlined  } from "@ant-design/icons"
import Link from "next/link"
import Router from "next/router"
const Header=(props)=>{
    useEffect(()=>{
        WScroll()
    },[])
   
function WScroll(){
    document.addEventListener("scroll",function(){
        if(document.documentElement.scrollTop>50){
              document.querySelector(".header").classList.add("header_scroll")
        }else{
          document.querySelector(".header").classList.remove("header_scroll")
        }
    })
}
const handleClick = (e)=>{
    if(e.key=="home"){
        Router.push('/')
    }
}

   return( <div className="header">
        <Row type="flex" justify="center">
            <Col xs={24} sm={24} md={10} lg={15} xl={12}>
            <span className="header-logo">笔迹</span>
            <span className="header-txt">ling</span>
            </Col>
            <Col xs={0} sm={0} md={14} lg={8} xl={6}>
                <Menu mode="horizontal"  onClick={handleClick}>
                    <Menu.Item key="home">
                    <HomeOutlined />
                    首页
                        </Menu.Item>
                </Menu>
            </Col>
        </Row>
    </div>
   )
}

export {Header}